<template>
  <div>
    <!-- grid 布局学习 -->
    <!-- <div class="grid_box grid_box_1">
      <div class="grid_box_name">基础用法</div>
    </div> -->
    <!-- <div class="grid_box grid_box_2">
      <div class="grid_box_name">repeat</div>
    </div> -->
    <!-- <div class="grid_box grid_box_3">
      <div class="grid_box_name">auto-fill/自适应填充</div>
    </div> -->
    <!-- <div class="grid_box grid_box_4">
      <div class="grid_box_name">fr/份数单位</div>
    </div> -->
    <!-- <div class="grid_box grid_box_5">
      <div class="grid_box_name">auto</div>
    </div> -->
    <!-- <div class="grid_box grid_box_6">
      <div class="grid_box_name">行列间隔/grid-gap</div>
    </div> -->
    <!-- <div class="grid_box grid_box_7">
      <div class="grid_item"></div>
      <div class="grid_item"></div>
      <div class="grid_item"></div>
      <div class="grid_item"></div>
      <div class="grid_item"></div>
      <div class="grid_box_name">grid-template-areas属性</div>
    </div> -->
    <!-- <div class="grid_box grid_box_8 grid_row">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_box_name">grid-auto-flow属性(row/column)</div>
    </div>
    <div class="grid_box grid_box_8 grid_row_dense">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_box_name">grid-auto-flow属性(row dense/column dense)</div>
    </div> -->
    <!-- <div class="grid_box grid_box_9">
      <div class="grid_box_name">justify-items/align-items/place-items</div>
    </div>  -->
    <div class="grid_box grid_box_10">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_box_name">grid-auto-columns/grid-auto-rows</div>
    </div> 
  </div>
</template>
<script>
export default {
  name: "game",
  data() {
    return {};
  },
  created() {
   
  },
  mounted() {

  },
  methods: {

  }
};
</script>
<style scoped>
  .grid_box {
    /* 容器设置为grid */
    display: grid; 
    /* 类似flex 可以设置为行内块 */
    /* display: inline-grid; */
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background: red;
    position: relative;
    top: 0;
    left: 0;
  }

  
  .grid_box_name {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
  }

  .grid_item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    color: #000;
    font-weight: 700;
  }

  .grid_item:nth-child(1) {
    background: red;
  }
  .grid_item:nth-child(2) {
    background: blue;
  }
  .grid_item:nth-child(3) {
    background: green;
  }
  .grid_item:nth-child(4) {
    background: purple;
  }
  .grid_item:nth-child(5) {
    background: skyblue;
  }
  .grid_item:nth-child(6) {
    background: #F8D29D;
  }
</style>
<style scoped>

  
  .grid_box_1 { /* 基础用法 */
    /* []包裹可以给该列命名，且不止可以命名一个 */
    /* 设置一个3*3 每行每列都为100*100的布局 */
    /* 列 */
    grid-template-columns: [c1 a1]100px 100px 100px; 
    /* 行 */
    grid-template-rows: 100px 100px 100px;
  }

  .grid_box_2 { /* repeat用法 */
    /* repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。 */
    /* 接收具体数值 */
    grid-template-rows: repeat(3, 100px);
    /* 接收百分比 */
    grid-template-columns: repeat(3, 33.33%);
    /* 或者某种模式的重复 */
    /* 表示 100 20 80 重复2次 */
    /* grid-template-columns: repeat(2, 100px 20px 80px); */
    /* minmax() 接收一个最大值一个最小值，默认按照最大值展示，当容器被迫缩小时一同缩小，直到最小值停止缩小 */
  }

  .grid_box_3 { /* auto-fill自适应填充 */
    width: 400px;
    height: 300px;
    /* 宽为400 列自适应可放数量  除不尽的舍掉，剩余的部分容器将会空白 */
    grid-template-columns: repeat(auto-fill, 60px);
    grid-template-rows: repeat(3, 100px);
  }

  .grid_box_4 { /* fr份数单位 */
    width: 400px;
    height: 300px;
    /* 剩余的部分将会划分为 fr份数 根据fr的数值展示效果 */
    grid-template-columns: repeat(2, 100px) 1fr 2fr;
    grid-template-rows: repeat(3, 100px);
  }

  .grid_box_5 { /* auto */
    /* 剩余部分自动填充，除非单元格设置了min-width 且该值大于剩余部分的值 */
    grid-template-columns: 100px 10px auto;
    grid-template-rows: repeat(3, 100px);
  }

  .grid_box_6 { /* grid-gap */
    /* 设置行列之间的间隔 */
     /**行间隔 */
    /* grid-row-gap: 30px; */
    /**列间隔 */
    /* grid-column-gap: 30px;  */
    /**简写间隔  一个值默认俩个值一样，否则写俩个值*/
    grid-gap: 30px;
    /* 等价于 */
    /* grid-gap: 30px 30px; */
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
  }
</style>
<style scoped>
  
  .grid_box_7 { /* grid-template-areas 自定义网格区域 */
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3,100px);
    /* grid-template-areas 定义将各区域划分为某个item(子集合) .代表该位置不划分*/
    grid-template-areas:'a a .' 
                        'd d d' 
                        'h g i';
    background: #fff;
  }

  .grid_box_7 .grid_item:nth-child(1) {
    /* 在子代使用 grid-area 设置对应的名字即可占用父级划分给的部分 */
    grid-area: a;
  }
  .grid_box_7 .grid_item:nth-child(2) {
    grid-area: d;
  }
  .grid_box_7 .grid_item:nth-child(3) {
    grid-area: g;
  }
  .grid_box_7 .grid_item:nth-child(4) {
    grid-area: h;
  }
  .grid_box_7 .grid_item:nth-child(5) {
    grid-area: i;
  }
</style>
<style scoped>
  .grid_box_8 {
    /* grid-auto-flow row/column/row dense/column dense*/
    grid-template-columns:repeat(3,100px);
    grid-template-rows: repeat(3,100px);
    background: #fff;
    /*
    * row 按照先行后列排列 有富裕空间不填充
    *
    * column 按照先列后行排列 有富裕空间填充
    *
    * row dense 按照先行后列排列 有富裕空间会填充后面的第一个可以填充的元素以此类推
    * 
    * column dense 按照先列后行排列 有富裕空间会填充后面的第一个可以填充的元素以此类推
    */
  }

  .grid_row {
    grid-auto-flow: row;
  }

  .grid_row_dense {
    grid-auto-flow: row dense;
  }

  .grid_box_8 .grid_item {
    height: 100%;
  }

  .grid_box_8 .grid_item:nth-child(1) {
    /* 该子元素起列的第一条线终止列的第三条线 */
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .grid_box_8 .grid_item:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 3;
  }
</style>
<style scoped>
  .grid_box_9 {
    /* justify-content align-content place-content */
    /* 该属性调整的为整个内容区域在容器中的位置 */
    grid-template-rows: repeat(2,100px);
    grid-template-columns: repeat(2,100px);
    /* start end center */
    justify-content: space-evenly;
    align-content: space-evenly;
    /* stretch 项目大小没有指定时，拉伸占据整个网格容器 */
    /* space-around 类似于flex */
    /* space-between 类似于flex */
    /* space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔 */
    /* place-content 为 justify-content 和 align-content 的简写 如果省略第二个值，浏览器就会假定第二个值等于第一个值*/  
  }

  .grid_box_10 {
    grid-template-columns: repeat(3,100px);
    grid-template-rows: repeat(3,100px);
    background: pink;
    grid-auto-flow: row;
    /* 设置超出内容区域的item的宽高 */
    /* 超出列 例如3*3网格共4条线 设置开始线大于3 （grid-row-start: 5）*/
    grid-auto-rows: 50px;
     /*超出行 例如3*3网格共4条线 设置开始线大于3 （grid-column-start 5）*/
    grid-auto-columns: 50px; 
  }

  .grid_box_10  .grid_item:nth-child(4) {
    /* row 起始线条 */
    /* grid-row-start: 4; */
    /* row 终止线条 */
    /* grid-row-end: 6; */
    /* column 起始线条 */
    grid-column-start: 1;
    /* column 终止线条 */
    grid-column-end: 4;
    /* 可以跟线条的名称，前面的命名 */
    /* grid-column-start: c1-start; */
    /* 如果属性定位产生重叠，可以使用z-index 设置层级大小 */

    /* span 表示跨域多少个网格 */
    /* grid-column-start: span 2 */

    /**
      grid-row 为 grid-row-start grid-row-end 的简写
      grid-column 为 grid-column-start grid-column-end 的简写
    **/
    /* 示例 */
    grid-row: 4/6;
    /* 等价于 grid-row:4/span 2 */
    grid-column: 1/4;
    /* 等价于 grid-column:1/span 3 */
  }

  .grid_box_10  .grid_item:nth-child(3) {
    /* justify-self 属性，align-self 属性，place-self 属性 */
    /* 表示该项目在单元格内的位置 */
    /* justify-self 和 align-self 的四个属性 */
    /* 
      start：对齐单元格的起始边缘。
      end：对齐单元格的结束边缘。
      center：单元格内部居中。
      stretch：拉伸，占满单元格的整个宽度（默认值）。
     */
     /* place-self 为 justify-self 和 align-self的简写 */
    grid-row-start: 1;
    grid-column-start: 1;
  }

  .grid_box_10  .grid_item:nth-child(5) {
    grid-row-start: 6;
    grid-column-start: 4;
  }
</style>